<template>
  <div>
    <b-row>
      <b-col xl="3" style="border: 1px solid rgba(86,61,124,.2);">
        <b-row style="border-bottom: 1px solid rgba(86,61,124,.2);padding:10px">
          <b-container>
            故障类大小
          </b-container>
        </b-row>
        <b-row style="padding:15px;background-color: #ffffff;height:100%">
          <ul id="treeDemo" class="ztree" style="width:500px"></ul>
          <!-- -->
        </b-row>
      </b-col>
      <b-col style="border: 1px solid rgba(86,61,124,.2);">
        <b-row style="border-bottom: 1px solid rgba(86,61,124,.2);padding:10px">
          <b-container>
            执行预处理
          </b-container>
        </b-row>
        <b-row style="padding:15px;background-color: #ffffff;height:100%">
          <div class="table">
            <b-alert variant="danger" dismissible :show="associateId==-1 ? true : false">
              未选择故障大小类菜单
            </b-alert>
            <!-- 故障模型关联表-->
            <FaultAnticipateModelAssociateTable :associateId="associateId">
            </FaultAnticipateModelAssociateTable>
          </div>
        </b-row>
      </b-col>
    </b-row>
  </div>
</template>
<script>
import FaultAnticipateModelAssociateTable from "@/components/FaultAnticipateModelAssociateTable.vue";
import $ from "jquery";
import "@/assets/css/zTreeStyle.css";
import "@/assets/css/newadd.css";
import "@/utils/jquery.ztree.core";
import {
  baseURL,
  get,
  save,
  associate,
  getAndAssociate,
  remove,
  axios
} from "src/service/api";
// 故障大小类与预处理模型关联，主要是对模型进行关联
export default {
  components: {
    FaultAnticipateModelAssociateTable
  },
  data() {
    return {
      showDismissibleAlert: true,
      zNodes: [],
      nowNode: "",
      tree: "",
      associateId: -1,
      items: [
        {
          isActive: true,
          age: 40,
          name: { first: "Dickerson", last: "Macdonald" }
        }
      ]
    };
  },
  beforeMount: async function() {
    let self = this;
    $(document).ready(function() {
      console.log("初始化");
      let setting = {
        data: {
          simpleData: {
            enable: true
          }
        },
        callback: {
          onClick: zTreeOnClick
        }
      };
      function zTreeOnClick(event, treeId, treeNode, clickFlag) {
        console.log("id=" + treeNode.id);
        self.nowNode = treeNode.id;
        self.associateId = treeNode.id;
      }
      let treeObj = $("#treeDemo");
      get("relations/search/all")
        .then(response => {
          if (response.status == "200") {
            console.log("资源获取成功");
            self.tree = response.data._embedded.relations;
            self.tree.forEach((item, index) => {
              let str = item._links.relation.href;
              let position = str.lastIndexOf("/");
              let id = str.substring(position + 1, str.length);
              self.zNodes.push({
                id: parseInt(id),
                pId: parseInt(item.parentId),
                name: item.name,
                href: item._links.relation.href
              });
            });
            $.fn.zTree.init(treeObj, setting, self.zNodes);
          }
          console.log(response);
        })
        .catch(error => {
          console.log(error);
        });

      function addDiyDom(treeId, treeNode) {
        let spaceWidth = 5;
        let switchObj = $("#" + treeNode.tId + "_switch"),
          icoObj = $("#" + treeNode.tId + "_ico");
        switchObj.remove();
        icoObj.before(switchObj);

        if (treeNode.level > 0) {
          let spaceStr =
            "<span style='display: inline-block;width:" +
            spaceWidth * treeNode.level +
            "px'></span>";
          switchObj.before(spaceStr);
        }
      }
    });
  }
};
</script>
<style lang="scss">
.row {
  margin-right: 0px;
  margin-left: 0px;
}
.col,
.col-xl-3 {
  padding: 0px;
}
</style>
